<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: LENOVO
  Date: 2021/6/9
  Time: 21:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<html>
<head>
    <title>211806398陆桂莺</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style type="text/css">
        .left-sidebar {
            background-color: #EEEEEE;
            height: 660px;
        }

        .left-sidebar li:hover {
            background-color: #99CC99;
        }
    </style>
    <script>
        function getQueryVariable(variable){
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }
        var loginName = "";
        window.onload = function(){
            var loginNames = getQueryVariable("username");
            //通过URL加密解密解决中文乱码
            loginName = decodeURI(loginNames);
        }
        function getNow() {
            var now = new Date(),
                y = now.getFullYear(),
                month = now.getMonth(),
                d = now.getDate(),
                h = now.getHours(),
                m = now.getMinutes(),
                s = now.getSeconds();
            return (y + "-" + (month + 1) + "-" + d + "_" + h + "-" + m + "-" + s);
        }


        function save(){
            var title = $("#title").val();
            var achievment = $("#achievment").val();
            var problem = $("#problem").val();
            //username
            //console.log(getQueryVariable("username"));
            var user = loginName;
            var time = getNow();
            console.log(title + "," + achievment + "," + problem + "," + user  + "," + time);
            $.ajax({
                url:"/dailyreport/report/save",
                data:{
                    "title":title,
                    "user":user,
                    "time":time,
                    "achievment":achievment,
                    "problem":problem
                },
                dataType:"json",
                success:function(data){
                    if(data.code == "1"){
                        alert("提交成功");
                        window.location.href = "/dailyreport/report/back?username=" + loginName;
                    }
                    else{
                        alert("提交失败");
                    }
                }
            })
        }
    </script>
    <script>
        function toViewReport(id){
            $.ajax({
                url:"/dailyreport/report/toLookReport",
                data:{
                    "id":id
                },
                dataType:"json",
                success:function(data){
                    $("#titleLook").val(data.title);
                    $("#achievmentLook").val(data.achievment);
                    $("#problemLook").val(data.problem);
                }
            })
        }
        function toDeleteReport(id) {
            var r=confirm("是否删除该日报");
            if (r==true){
                $.ajax({
                    url:"/dailyreport/report/toDeleteReport",
                    data:{
                        "id":id,
                        "name":loginName
                    },
                    dataType:"json",
                    success:function(data){
                        if(data.code == "1"){
                            alert("删除成功");
                            window.location.href = "/dailyreport/report/back?username=" + loginName;
                        }
                        else{
                            alert("删除失败");
                        }
                    }
                })
            }
        }
        var updateId = 0;
        function toUpdateReport(id) {
            $.ajax({
                url:"/dailyreport/report/toLookReport",
                data:{
                    "id":id
                },
                dataType:"json",
                success:function(data){
                    $("#titleChange").val(data.title);
                    $("#achievmentChange").val(data.achievment);
                    $("#problemChange").val(data.problem);
                    updateId = id;
                }
            })
        }
        function UpdateReport() {
            var title = $("#titleChange").val();
            var achievment = $("#achievmentChange").val();
            var problem = $("#problemChange").val();
            var user = loginName;
            var time = getNow();
            console.log(title + "," + achievment + "," + problem + "," + user  + "," + time);
            $.ajax({
                url:"/dailyreport/report/toUpdateReport",
                data:{
                    "id":updateId,
                    "title":title,
                    "user":user,
                    "time":time,
                    "achievment":achievment,
                    "problem":problem
                },
                dataType:"json",
                success:function(data){
                    if(data.code == "1"){
                        alert("修改成功");
                        window.location.href = "/dailyreport/report/back?username=" + loginName;
                    }
                    else{
                        alert("修改失败");
                    }
                }
            })
        }
    </script>
    <script>
        function toReportList() {
            var name = $("#sname").val();
            console.log(name);
            if (name != ""){
                window.location.href = "/dailyreport/report/back?name=" + name + "&username=" + loginName;
            }
        }
    </script>
</head>
<body>
    <div>
        <nav class="navbar navbar-expand-sm bg-success navbar-dark">
            <a class="navbar-brand" href="#">DFRZ后台管理系统</a>
        </nav>
    </div>
    <div class="row">
        <div class="col-md-3 left-sidebar" align="center" style="padding:0px;">
            <ul class="nav flex-column" style="padding-top: 200px;">
                <li class="nav-item">
                    <a class="nav-link" href="#" style="color: black;">用户管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" style="color: black;">周报管理</a>
                </li>
            </ul>
        </div>
        <div class="col-md-9">
            <br>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#home">周报列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#menu1">周报添加</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div id="home" class="tab-pane active"><br>
                    <form class="form-inline" style="margin-bottom: 30px;"
                    action="/dailyreport" role="form">
                        <input type="text" class="form-control" id="sname" placeholder="Enter search">
                        <button type="button" class="btn btn-primary" onclick="toReportList()">搜索</button>
                        <c:if test="${sessionScope.loginUser.username == 'admin'}">
                            <button type="button"
                                    class="btn btn-danger"
                                    style="margin-left: 50px;"
                                    id="exportReport">
                                导出所有数据
                            </button>
                        </c:if>
                    </form>
                    <script type="text/javascript">
                        $(function(){
                            $("#exportReport").click(function () {
                                window.location.href = "/dailyreport/report/exportInfo";
                            });
                        });
                    </script>

                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>标题</th>
                            <th>
                                提交人
                                <c:if test="${sessionScope.loginUser.username == 'admin'}">
                                    <button class="btn btn-light btn-mini" onclick="sortUser()">用户名降序</button>
                                    <button class="btn btn-light btn-mini" onclick="sortId()">恢复</button>
                                </c:if>
                            </th>
                            <th>
                                提交时间
                                <c:if test="${sessionScope.loginUser.username == 'admin'}">
                                    <button class="btn btn-light btn-mini" onclick="sortTime()">时间降序</button>
                                    <button class="btn btn-light btn-mini" onclick="sortId()">恢复</button>
                                </c:if>
                            </th>
                            <script>
                                function sortId() {
                                    window.location.href = "/dailyreport/report/back?name=" + name + "&username=" + loginName + "&type=id";
                                }
                                function sortTime() {
                                    window.location.href = "/dailyreport/report/back?name=" + name + "&username=" + loginName + "&type=time";
                                }
                                function sortUser() {
                                    window.location.href = "/dailyreport/report/back?name=" + name + "&username=" + loginName + "&type=user";
                                }
                            </script>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach var="report" items="${list}">
                            <tr>
                                <td>${report.id}</td>
                                <td>${report.title}</td>
                                <td>${report.user}</td>
                                <td>${report.time}</td>
                                <td>
                                    <button type="button" class="btn btn-primary"
                                            data-toggle="modal" data-target="#myModal"
                                            onclick="toViewReport(${report.id})">查看</button>
                                    <c:if test="${sessionScope.loginUser.username == report.user ||
                                                sessionScope.loginUser.username == 'admin'}">
                                        <button type="button" class="btn btn-warning"
                                                data-toggle="modal" data-target="#myModal2"
                                                onclick="toUpdateReport(${report.id})">编辑</button>
                                        <button type="button" class="btn btn-danger"
                                                onclick="toDeleteReport(${report.id})">删除</button>
                                    </c:if>

                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <ul class="pagination" style="margin-top: 50px;">
                        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
                    </ul>

                    <!-- 模态框 -->
                    <div class="modal fade" id="myModal2">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <!-- 模态框头部 -->
                                <div class="modal-header">
                                    <h4 class="modal-title">周报编辑</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <!-- 模态框主体 -->
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <label for="titleChange">标题:</label>
                                            <input type="text" class="form-control" id="titleChange" value="">
                                        </div>
                                        <div class="form-group">
                                            <label for="achievmentChange">成果:</label>
                                            <br>
                                            <textarea id="achievmentChange" cols="61" rows="5" value=""></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label for="problemChange">问题:</label>
                                            <br>
                                            <textarea id="problemChange" cols="61" rows="5" value=""></textarea>
                                        </div>
                                    </form>
                                </div>
                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-warning" data-dismiss="modal" onclick="UpdateReport()">提交修改</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 模态框 -->
                    <div class="modal fade" id="myModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <!-- 模态框头部 -->
                                <div class="modal-header">
                                    <h4 class="modal-title">周报查看</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <!-- 模态框主体 -->
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <label for="titleLook">标题:</label>
                                            <input type="text" class="form-control" id="titleLook" value="">
                                        </div>
                                        <div class="form-group">
                                            <label for="achievmentLook">成果:</label>
                                            <br>
                                            <textarea id="achievmentLook" cols="61" rows="5" value=""></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label for="problemLook">问题:</label>
                                            <br>
                                            <textarea id="problemLook" cols="61" rows="5" value=""></textarea>
                                        </div>
                                    </form>
                                </div>
                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="menu1" class="tab-pane fade"><br>
                    <h3>周报添加</h3>
                        <div class="form-group">
                            <label for="title"><span style="color: red;">*</span>标题:</label>
                            <input type="text" class="form-control" id="title" placeholder="Enter title">
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="achievment"><span style="color: red;">*</span>本周成果:</label>
                                <br>
                                <textarea rows="10" cols="70" id="achievment"></textarea>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="problem"><span style="color: red;">*</span>问题:</label>
                                <br>
                                <textarea rows="10" cols="70" id="problem"></textarea>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary" onclick="save()">增  加</button>

                    <!-- 按钮：用于打开模态框 -->
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#upload">
                        上传附件
                    </button>

                    <!-- 模态框 -->
                    <div class="modal fade" id="upload">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <!-- 模态框头部 -->
                                <div class="modal-header">
                                    <h4 class="modal-title">附件上传</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <!-- 模态框主体 -->
                                <div class="modal-body">
                                    <input type="file" id="exampleInputFile"/>
                                    <button type="button" class="btn btn-success" onclick="ajaxFileUpload()">上传</button>
                                    <input type="text" value="" id="isUpload" style="border: 0;"/>
                                    <div id="filelist"></div>
                                </div>
                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="uploadMsg()">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script>
                        //文件列表显示元素获取
                        var isUpload = $("#isUpload");
                        //点击关闭后文件列表清空
                        function uploadMsg() {
                            isUpload.val("");
                        }
                        //上传文件
                        function ajaxFileUpload(){
                            var formData = new FormData();
                            //将文件转成二进制形式
                            formData.append('file',$("#exampleInputFile")[0].files[0]);
                            $.ajax({
                                type:"post",
                                url:"/dailyreport/report/upload",
                                async:false,
                                //这个一定要写
                                contentType: false,
                                //这个也一定要写，不然会报错
                                processData: false,
                                data:formData,
                                //返回类型，有 json，text，HTML
                                dataType:'json',
                                success:function(data){
                                    if(data.code == "1"){
                                        isUpload.val("上传成功！");
                                        var html = "<div><a href='#'>" + data.filename + "</a></div>";
                                        $("#filelist").append(html);
                                    }
                                    else{
                                        isUpload.val("上传失败！");
                                    }
                                },
                            });
                        }
                    </script>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
